<template>
  <a-form-item :name='props.formNamePath' :label="formItem.label" :rules="[formItem.rule]"
    :extra="formItem.extra" :style="{ marginLeft: formItem.marginLeft + 'px' }"
    :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
    <span class="ant-upload-picture-card-wrapper avatar-uploader" @click="isVisible = true">
      <div class="ant-upload-list ant-upload-list-picture-card">
        <div class="ant-upload ant-upload-select"><span tabindex="0" class="ant-upload" role="button">
            <button class="ant-btn upload_button_line" type="button"
              :disabled="formItem.maxCount ? formItem.value.length >= formItem.maxCount : false"
              ant-click-animating-without-extra-node="false"><!---->
              <upload-outlined></upload-outlined>
              <span class="iconfont icon-upload">
              </span>
              <span>选择文件</span>
            </button>
          </span>
        </div>
        <p class="help-msg">{{ formItem.helpMsg }}
        <p v-if="formItem.imgSuggest">（{{ formItem.imgSuggest
        }}）</p>
        </p>
      </div>
    </span>
    <!-- 上传会回显列表，其实把上传组件的点击上传隐藏掉了 -->
    <a-form-item-rest>
      <multiPictureUpload :fileList="formItem.value" :maxCount="formItem.maxCount" @uploadFinished="uploadFinished"
        @uploadChangeFinished="uploadChangeFinished" @upload_remove_Finished="upload_remove_Finished"
        @addDescription="addDescription" @draggend="draggend" :showCard="false" :description="formItem.description">
      </multiPictureUpload>
    </a-form-item-rest>
  </a-form-item>
  <uploadDialong @uploadFinished="handleConfirm" @handleCancle="isVisible = false" :isVisible="isVisible"
    @addDescription="addDescription" uploadType="insertimage"
    :maxCount="formItem.maxCount ? (formItem.maxCount - formItem.value.length) : 100000000"
    :description="formItem.description" :formItem="formItem">
  </uploadDialong>
</template>
<script lang="ts" setup>
import { ref, watch, computed, nextTick, onMounted, reactive } from "vue";
import baseTabs from "@/components/tabs/baseTabs.vue";
import baseModal from "@/components/modal/baseModal.vue";
import multiPictureUpload from "@/components/uploadDialog/multiPictureUpload.vue";
import uploadDialong from "@/components/uploadDialog/uploadDialong.vue";
import resourceLibrary from "@/components/uploadDialog/resourceLibrary.vue";
import { message } from "ant-design-vue";
import { request } from "@/api/axios";
import { dataSourceType } from "@/type";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType
  },
  formNamePath: []
})
// emit
const emit = defineEmits(['changeImg', 'removeFinished', "uploadFinished"]);
//data
const formItem: any = ref(props.formItem as any);

//模态框
const isVisible = ref(false)
const modAlProps = reactive({
  width: "L",
  title: "上传图片",
});
// const formItem = ref<any>({});

//methods
// 上传图片
const uploadFinished = (data: any, originId: any) => {
  if (originId) {
    formItem.value.value.forEach((item: any, index: number) => {
      if (item.id == originId) {
        formItem.value.value.splice(index, 1, ...data)
      }
    });
  } else {
    formItem.value.value.push(...data);
  }
}
// 删除图片
const upload_remove_Finished = (data: any) => {
  formItem.value.value.forEach((item: any, index: number) => {
    if (item.id == data.id) {
      formItem.value.value.splice(index, 1,)
    }
  });
  //emit('removeFinished', data);
}
// 修剪图片
const uploadChangeFinished = (data: any) => {
  console.log(data, 1212);
}
useColumnItem(computed(() => props.formItem), formItem);
const formState = ref<dataSourceType>({});
const optionsFile = ref<any[]>([]);
const statusSetting = ref<string | number>();

const tabsList = [
  {
    tabName: "资源上传",
    key: 1,
  },
  {
    tabName: "资源库",
    key: 2,
  },
];
const handleConfirm = (html: any, data: any, description: any) => {
  data[0].description = description;
  formItem.value.value.push(...data);
  isVisible.value = false;
}
const addDescription = (id: any, val: {}) => { // 图片添加描述
  formItem.value.value.forEach((item: dataSourceType, index: any) => {
    if (item.id == id) {
      formItem.value.value[index] = JSON.parse(JSON.stringify(val));
    }
  });
}
const draggend = (val: any[]) => { //上传后拖拽图片
  formItem.value.value = JSON.parse(JSON.stringify(val));
}
</script>
<style lang="scss" scoped>
.flex {
  margin-top: 24px;
  display: flex;
}

.ant-tabs {
  // margin-bottom: 24px;
}

.lables {
  margin-right: 12px;
  width: 120px;
  height: 22px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  text-align: right;
}

.tips {
  margin-top: 8px;
  height: 20px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}

.ant-upload-picture-card-wrapper {
  width: auto;
}
</style>
<style lang="scss"></style>
